<!-- 通报记录 -->
<template>
  <div class="wrapper">
    <search-form :area="'water'" @search="search" @handleDel="handleDel" @exportXls="handleExportXls">
    </search-form>
    <div>
      <a-button type="primary" @click="handleAudit(1)">批量审核</a-button>
      <a-button style="margin-left: 10px;" type="danger" @click="handleAudit(0)">批量反审核</a-button>
      <a-button style="margin-left: 10px;" type="primary" @click="handlePays()">批量付款</a-button>
    </div>
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <!-- <div slot="extra">
        <a-button type="primary" @click="handleAudit(1)">批量审核</a-button>
        <a-button type="danger" @click="handleAudit(0)">批量反审核</a-button>
      </div> -->
      <a-spin :indicator="indicator" :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="(record) => record.id" :columns="columns" :dataSource="tableList" :pagination="pagination" :rowSelection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }">
            <span slot="action" slot-scope="text, record">
              <template>
                <a size="small" type="link" @click="handleView(record)">查看</a>
                <a-divider type="vertical" v-if="!record.IsPay" />
                <a size="small" type="link" v-if="!record.IsPay" @click="handlePay(record)">缴费</a>
              </template>
            </span>
          </a-table>
        </div>
      </a-spin>
    </a-card>
    <info-modal :actionType="action" ref="infomodal" type="water" />
    <pay-modal ref="paymodal" @save="handleSubmitPay" />
    <pay-modal ref="paymodals" @save="handleSubmitPays"></pay-modal>
  </div>
</template>

<script>
import {
  GetWaterBillList,
  getWaterBillByID,
  saveWaterBill,
  deleteWaterBillByIds,
  paymentWaterBill,
  auditWaterBill,
  exportWaterBill,
  batchPaymentWater
} from "@/api/allApi";
import SearchForm from "./modules/searchform";
import InfoModal from './modules/billModal.vue'
import payModal from "./modules/payModal.vue";
import { getImg } from '@/api/students'

const columns = [
  {
    title: "合同编号",
    dataIndex: "ContractNo",
    key: "ContractNo",
    align: "center",
  },
  {
    title: "承租人",
    dataIndex: "LinkMan",
    key: "LinkMan",
    align: "center",
  },
  {
    title: "地址",
    dataIndex: "Address",
    key: "Address",
    align: "center",
  },
  {
    title: "年份",
    dataIndex: "year",
    key: "year",
    align: "center",
  },
  {
    title: "月份",
    dataIndex: "month",
    key: "month",
    align: "center",
  },
  {
    title: "金额",
    dataIndex: "money",
    key: "money",
    align: "center",
  },
  {
    title: "是否审核",
    dataIndex: "isAuditName",
    key: "isAuditName",
    align: "center",
  },
  {
    title: "是否缴费",
    dataIndex: "IsPayName",
    key: "IsPayName",
    align: "center",
  },

  {
    title: "抄表日期",
    dataIndex: "addTime",
    key: "addTime",
    align: "center",
  },
  {
    title: "付款日期",
    dataIndex: "updateTime",
    key: "updateTime",
    align: "center",
  },
  {
    title: "操作",
    width: "150px",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
  },
];
export default {
  name: "",
  components: { SearchForm, InfoModal, payModal },
  props: [],
  data () {
    return {
      columns: columns,
      action: "add",
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      spinning: false,
      tableList: [],
      queryParam: {
        index: 1,
        pageSize: 10,
      },
      BillID: '',
      selectedRowKeys: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize);
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: "small",
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "15", "20", "50", "100"],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize);
        },
        position: "bottom",
      },
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.initData(this.queryParam)
  },
  methods: {
    async initData (params) {
      this.spinning = true;
      const { data, message, page } = await GetWaterBillList({ ...params });
      this.pagination.total = page.RecordCount;
      this.tableList = data;
      this.tableList.map((a) => {
        a.notificationTime = this.$moment(a.notificationTime).format('YYYY-MM-DD');
        a.addTime = this.$moment(a.addTime).format('YYYY-MM-DD HH:mm:ss');
        a.updateTime = this.$moment(a.updateTime).format('YYYY-MM-DD HH:mm:ss');
        a.isAuditName = a.isAudit === true ? "是" : "否";
        a.IsPayName = a.IsPay == true ? "是" : "否";
      });
      this.spinning = false;
    },

    search (data) {
      Object.assign(this.queryParam, data, { index: 1 });
      this.pagination.current = 1;
      this.initData(this.queryParam);
    },
    /** 选择框 */
    onSelectChange (selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys;
    },

    handlePay (row) {
      this.BillID = row.id
      this.$refs.paymodal.view()
    },
    //批量付款
    handlePays (event) {
      const _this = this
      if (this.selectedRowKeys.length == 0) {
        _this.$success({
          title: '请先选择数据'
        })
        return
      }
      this.$refs.paymodals.view()
    },
    handleSubmitPay (str) {
      let _this = this
      paymentWaterBill({
        BillID: this.BillID,
        IsPay: true,
        remark: str
      }).then(res => {
        if (res.success) {
          _this.initData(_this.queryParam)
          _this.$refs.paymodal.closeModal()

        }
      })
    },
    //批量付款
    handleSubmitPays (str) {
      let _this = this
      batchPaymentWater({
        BillIDs: _this.selectedRowKeys,
        remark: str
      }).then(res => {
        if (res.success) {
          _this.selectedRowKeys = []
          _this.initData(_this.queryParam)
          _this.$refs.paymodals.closeModal()

        }
      })
    },
    // 添加
    handleAdd () {
      this.action = "add";
      this.$refs.infomodal.view();
    },
    //添加保存接口
    async handleSave (values) {
      const { code, message } = await saveWaterBill(values)

      this.$message.success(message)
      this.$refs.infomodal.closeModal()
      this.initData(this.queryParam)
    },
    handleExportXls (data) {
      var _this = this
      _this.spinning = true
      _this.queryParam = Object.assign({}, _this.queryParam, data)

      exportWaterBill(_this.queryParam)
        .then(res => {
          const a = getImg(res.data)
          window.open(a)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    //编辑
    async handleEdit (row) {
      this.spinning = true;
      this.action = "edit";
      const { code, data } = await getWaterBillByID({ id: row.id })

      this.$refs.infomodal.view(data);
      this.spinning = false;
    },

    // 查看详情
    async handleView (row) {
      this.spinning = true;
      this.action = "view";
      const { code, data } = await getWaterBillByID({ id: row.id })
      this.spinning = false;

      this.$refs.infomodal.view(data);

    },

    handleAudit (v, event) {
      const _this = this
      console.log(this.selectedRowKeys)
      if (this.selectedRowKeys.length == 0) {
        _this.$success({
          title: '请先选择数据'
        })
        return
      }
      this.$confirm({
        title: v == 1 ? '是否确认审核？' : '是否确认反审核',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          auditWaterBill({ AuditState: v, BillIDs: _this.selectedRowKeys }).then(res => {
            if (res.success) {
              _this.$success({
                title: '操作'
              })
              _this.initData(_this.queryParam)
            }
          })
        }
      })
    },

    /**
     * 批量删除
     */
    async handleDel () {
      this.spinning = true;
      const { code, message } = await deleteWaterBillByIds(this.selectedRowKeys);
      this.spinning = false;
      this.selectedRowKeys = [];
      this.initData(this.queryParam);

      this.$message.success(message);

    },

    pageOnChange (index, pageSize) {
      this.spinning = true;
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index,
      });
      Object.assign(this.queryParam, {
        pageSize,
        index,
      });
      this.initData(this.queryParam);
    },
  },
};
</script>
<style>
/** lang='less' scoped */
</style>